import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { ModalC, TableC, SecondHeaderC, PrimaryC } from '../../../../comps';
import moment from 'moment';

class turnoverModalC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      xtcolumns: [], // 系统表头
      cwcolumns: [], // 财务表头
      xtdataSource: [], // 系统数据
      cwdataSource: [], // 财务数据
    };
  }
  componentDidMount() {
    const {
      modalData,
      ValuationCheckM: { xtcolumns, cwcolumns },
    } = this.props;
    // 获取系统和财务数据
    this.props.dispatch({
      type: 'ValuationCheckM/getturnover',
      payload: {
        productCode: modalData.fundcode,
        tradingCode: modalData.tradingcode,
        dataDt: modalData.dataDt,
        securityType: modalData.type,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            xtcolumns: xtcolumns, // 系统表头
            cwcolumns: cwcolumns, // 财务表头
            xtdataSource: data.xtdataSource, // 系统数据
            cwdataSource: data.cwdataSource, // 财务数据
          });
        } else {
          this.setState({
            xtcolumns: xtcolumns, // 系统表头
            cwcolumns: cwcolumns, // 财务表头
            xtdataSource: [], // 系统数据
            cwdataSource: [], // 财务数据
          });
        }
      },
    });
  }

  render() {
    const { modalData, isVisible, loading } = this.props;
    const { xtcolumns, xtdataSource, cwcolumns, cwdataSource } = this.state;
    const modalProps = {
      destroyOnClose: true,
      visible: isVisible,
      title: '流水对比',
      width: 1000,
      footer: <PrimaryC title='确定' onClick={() => this.props.onCancel()} />,
      onCancel: () => {
        this.props.onCancel();
      },
    };
    return (
      <ModalC {...modalProps}>
        <div style={{ display: 'flex' }}>
          <div style={{ marginRight: '40px', marginLeft: '10px' }}>
            <span>产品：</span>
            <span>
              {modalData.fundcode}-{modalData.fundname}
            </span>
          </div>
          <div style={{ marginRight: '40px' }}>
            <span>证券：</span>
            <span>
              {modalData.tradingcode}-{modalData.zqName}
            </span>
          </div>
          <div>
            <span>对比日期：</span>
            <span>{moment(modalData.dataDt).format('YYYY-MM-DD')}</span>
          </div>
        </div>
        <div style={{ display: 'flex', marginTop: '15px' }}>
          <div style={{ marginRight: '20px', width: '50%' }}>
            <SecondHeaderC title='系统流水' />
            <TableC
              columns={xtcolumns}
              dataSource={xtdataSource}
              rowKey='id'
              scroll={{ y: 260 }}
              loading={loading.effects['ValuationCheckM/getturnover'] == true}
              hidePage={true}
            />
          </div>
          <div style={{ width: '50%' }}>
            <SecondHeaderC title='财务流水' />
            <TableC
              columns={cwcolumns}
              dataSource={cwdataSource}
              rowKey='id'
              scroll={{ y: 260 }}
              loading={loading.effects['ValuationCheckM/getturnover'] == true}
              hidePage={true}
            />
          </div>
        </div>
      </ModalC>
    );
  }
}
export default connect(({ ValuationCheckM, loading }) => ({ ValuationCheckM, loading }))(turnoverModalC);
